<template>
	<div class="invite-content">
		<div class="invite-top">
			<h6>邀请新用户</h6>
			<hr />
		</div>
		<div class="invite-emial">
			<span>请输入对方邮箱地址：</span>
			<input type="text" placeholder="username@email.com" @focus="inputFocus" 
				@blur="inputBlur" v-model="inputMess"/>
			<em v-if="isShow === 0" class="input-notice">username@email.com</em>
			<em v-if="isShow === 1"><i></i>请输入邮箱地址</em>
			<em v-if="isShow === 2"><i></i>username@email.com</em>
		</div>
		<div class="invite-invited">
			<a href="javascript:;" @click="sendInv">发送邀请</a>
		</div>
		<PersonPop :popContent="popTrue" v-if="isPop"/>
		
	</div>
</template>

<script>
	// 邀请成功提示信息
	import PersonPop from '@/components/public/personPop'
	export default {
		data () {
			return {
				isShow: null, // 邮箱提示
				inputMess: '', // input的值
				popTrue: { // 弹框的内容
					imgUrl: require("../../../../assets/registerOk.png"),
					content: "发送成功"
				},
				isPop: false // 是否显示昵称不和规定弹框
			}
		},
		components: {
			PersonPop
		},
		methods: {
			// 获取焦点
		    inputFocus () {
		    	var that = this
		    	that.isShow = 0
		    },
		    // 失去焦点
		    inputBlur () {
		    	var that = this
		    	var mess = that.inputMess
		    	if (mess === '') {
		          that.isShow = 1
		        } else {
		          if (/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/.test(mess)) {
		            that.isShow = 3
		          } else {
		            that.isShow = 2
		          }
		        }
		    },
		    // 发送邀请
		    sendInv () {
		    	var that = this
		    	if (that.isShow === 3) {
		    		that.isPop = true
		    		setTimeout (function () {
		    			that.isPop = false
		    		},3000)
		    	} else if (that.isShow === null) {
		    		 that.isShow = 1
		    	}
		    }
		}
	}
</script>

<style scoped>
 @import '../../../../../static/personal/invite.css';
</style>